一、Jquery-DataTables

DataTables 是jquery的一个开源的插件。它具有高度灵活的特性，基于渐进增强的基础，可以为任何表格添加交互。它特性如下：

• 提供分页，搜索和多列排序；
• 支持所有类型的数据源：
• DOM，javascript，Ajax和服务器端的处理；
• 简洁的主题，DataTables,JQuery UI，Bootstrap，Foundation；
• 支持各种扩展，包括编辑器, 表格工具, 固定列等；
• 丰富的可配置选项、富有表现力的api；

　　DataTabels下载地址为：。这里使用到的版本是1.10.6。

二、示例代码

1、数据源为javascript数组

　　网页代码如下：

1   2   3   4   5 
       6   7       8      13  14  15     
     
       16         
      
        17         
         18     
     
 19   20    21                                             121 122 

2、动态读取服务器数据

　　网页代码如下：

1   2   3   4   5 
       6   7       8      13  14  15     
     
            16         
      
        17             
         18             
          19                 
 20                 
 21                 
 22                 
 23                 
      24                 
 25                 
 26                 
 27                 
 28             
 29             
  30             
         31             
 32         
       
        
         
序号
         
学号
         
姓名
         
年龄
         
性别
         
籍贯
         
班级
         
生日
         
操作
        
       
       
       
      
 33     
     
 34   35    36 $(document).ready(function(){  37          38      var oTable = $('#sample_1').dataTable( {   39         "sAjaxSource": "${ctx}/student/data.action", 40         "sServerMethod": "POST" ,   //以post的方式提交数据 41         "fnServerParams": function ( aoData ) {//此处设置查询条件，根据条件进行查询列表 42         　　aoData.push( { "name": "nage", "value": $("#name").val()} );//年龄过滤 43         　　aoData.push( { "name": "classId", "value": $("#classId").val()} );//班级id过滤 44          　 aoData.push( { "name": "birthday", "value": $("#birthday").val()} );  //生日过滤 45          　 aoData.push( { "name": "city", "value": $("#city").val()} );  //生日过滤 46         },   47         "aoColumns": [ 48             {  "sName": "index", 49                 "sWidth": "4%", //设置宽度 50                 "sClass": "center", 51                 "bSearchable": false, 52                 "bStorable": false, 53                 "fnRender": function (a) { 54                     return a.iDataRow + 1; 55                 } 56             }, 57             {    "mData": "no",  58                 "sWidth": "10%" 59             }, 60             {    "mData": "name" , 61                 "sWidth": "10%" 62             }, 63             {    "mData": "graduationDate" , 64                 "sWidth": "10%" 65             }, 66             {    "mData": "gender" , 67                 "sWidth": "10%" 68             }, 69             {    "mData": "city" , 70                 "sWidth": "10%" 71             }, 72             {    "sName": "className", 73                 "sWidth": "10%", 74                 "sClass": "center", 75                 "bSearchable": false, 76                 "bStorable": false, 77                 "fnRender": function (a) { 78                 var result=""; 79                     jQuery.ajax({//通过classId获取班级名称 80                         url: "${ctx}/class/"+a.aData.classId, 81                         type: "get", 82                         async: false,  // false 为同步 83                         dataType: "json", 84                         success: function(data){ 85                             result = data.class.id; 86                         } 87                     }); 88                     return result;  89                 } 90             }, 91             {    "mData": "birthday",  92                 "sWidth": "10%" 93             }, 94             {    "sName": "action", 95                 "sWidth": "10%", 96                 "sClass": "center", 97                 "bSearchable": false, 98                 "bStorable": false, 99                 "fnRender": function (a) {100                     var s = "修改 ";  101                     var e = "详情 ";  102                     return s + e;  103                 }104             }105         ],106         "bPaginate": true, //开关，是否显示分页器107         "bServerSide": true,//服务器端分页108         "bSort": false, //开关，是否启用各列具有按列排序的功能109         "bSortClasses": false,110         "bFilter": false, //开关，是否启用客户端过滤器111         "sSearch" : false, //不过滤112         "sAjaxDataProp":  "rows",  //服务器端返回的json中对象数组对应的key113         "bAutoWidth": false, //自动设置宽度关闭114         "aoColumnDefs" : [ {115　　　　　　  sDefaultContent : '',116         　　aTargets : [ '_all' ]117         } ],118         "oLanguage": {119             "sProcessing": "正在加载中......",120             "sLengthMenu": "每页显示 _MENU_ 条记录",121             "sZeroRecords": "对不起，查询不到相关数据！",122             "sEmptyTable": "表中无数据存在！",123             "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",124             "sInfoFiltered": "数据表中共为 _MAX_ 条记录",125             "sInfoEmpty" : "显示0到0条记录",126             "sSearch": "搜索",127             "oPaginate": {128                 "sFirst": "首页",129                 "sPrevious": "上一页",130                 "sNext": "下一页",131                 "sLast": "末页"132             }133         } //多语言配置134     }); 135 });136                                             137 138 

　　服务器端代码如下：

1 /**  2      * 列表数据返回，jquery-data-table（此处采用springmvc实现） 3      * @param iDisplayStart 忽略前面的记录数 4      * @param iDisplayLength 页面大小 5      * @param request 6      * @return 7      * @throws Exception 8      */ 9 @RequestMapping("/data")10     @ResponseBody11     public Map
     
       jsonList(@RequestParam("iDisplayStart") int iDisplayStart,12             @RequestParam("iDisplayLength") int iDisplayLength, HttpServletRequest request) throws Exception {13         Map
      
        params = new HashMap
       
        ();14         params.setParameter("_currpage", iDisplayStart + 1);//转换成当前页号15         params.setParameter("_pagesize", iDisplayLength);//页面大小16         17         //查询条件18         params.setParameter("name", request.getParameter("name"));19         params.setParameter("classId", request.getParameter("classId"));20         params.setParameter("birthday", request.getParameter("birthday")); 21         params.setParameter("city", request.getParameter("city")); 22         23         List datas = null;24         int total = 0;25         try {26             total = this.getService().count(params);//总记录数27             datas = this.getService().query(params);//当前页面记录28         } catch (Exception e) {29             LOGGER.error("jsonListAction异常", e);30             Map
        
          rtn = new HashMap
         
          ();31             rtn.put("code", "0");32             rtn.put("error", "查询参数异常：" + e.getMessage());33             return rtn;34         }35         Map
          
            result = new HashMap
           
            ();36 result.put("iTotalDisplayRecords", total);37 result.put("iTotalRecords", total); 38 result.put("rows", datas);39 return result;40 }
           
          
         
        
       
      
     

　　服务器端返回的json数据格式如下：

{"iTotalDisplayRecords":30, "iTotalRecords":30, "rows":[{"id": "0001", "name" : "张三", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "北京" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "李四", "no" : "090002", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "上海" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "王二", "no" : "090003", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "杭州" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "赵六", "no" : "090004", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "张三2", "no" : "090005", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "张三3", "no" : "090006", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "张三4", "no" : "090007", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "张三5", "no" : "090008", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "张三6", "no" : "090009", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" },{"id": "0001", "name" : "张三7", "no" : "0900010", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001"},{"id": "0001", "name" : "张三8", "no" : "090001", "graduationDate" : "2012-07-01" , "gender" : "男", "city" : "深圳" , "birthday" : "1992-07-28" , "classId" : "10001" }]}